/**
 * 生命周期：getSnapshotBeforeUpdate 案例
 */
import React, { Component } from 'react'
// import '../css/06_clear.css';

export default class App extends Component {
    state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
    divRef = React.createRef();
    getSnapshotBeforeUpdate() {
        return this.divRef.current.scrollHeight;
    }
    componentDidUpdate(prevProps, prevState, value) {
        this.divRef.current.scrollTop += this.divRef.current.scrollHeight - value;
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({ list: [...[10, 11, 12, 13, 14, 15, 16, 17, 18, 19], ...this.state.list] })
                }}>来邮件</button>
                <h1>邮箱应用</h1>
                <div style={{ height: '200px', backgroundColor: 'yellow', overflow: 'auto' }} ref={this.divRef}>
                    {
                        this.state.list.map(item =>
                            <li style={{ height: '100px' }} key={item}>{item}</li>
                        )
                    }
                </div>
            </div>
        )
    }
}
